﻿<DemoPageSectionComponent Id="Editors-Common-Validation-FormLayout" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        @using System.ComponentModel.DataAnnotations
        @using BlazorDemo.Pages.Editors.Common.Models
        @using Microsoft.AspNetCore.Components

        <div class="cw-880">
            <EditForm Model="@starship"
                      OnValidSubmit="@HandleValidSubmit"
                      OnInvalidSubmit="@HandleInvalidSubmit"
                      Context="EditFormContext">

                <DataAnnotationsValidator/>

                <DxFormLayout SizeMode="Params.SizeMode">
                    <DxFormLayoutItem Caption="Identifier:" ColSpanMd="6">
                        <DxTextBox @bind-Text="@starship.Identifier" ShowValidationIcon="true"/>
                    </DxFormLayoutItem>

                    <DxFormLayoutItem Caption="Primary Classification:" ColSpanMd="6">
                        <DxComboBox NullText="Select classification ..."
                                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                                    Data="classifications"
                                    TextFieldName="Value"
                                    ValueFieldName="Id"
                                    @bind-Value="@starship.Classification"
                                    ShowValidationIcon="true"/>
                    </DxFormLayoutItem>

                    <DxFormLayoutItem Caption="Maximum Accommodation:"
                                      ColSpanMd="6">
                        <DxSpinEdit ShowValidationIcon="true"
                                    @bind-Value="@starship.MaximumAccommodation"/>
                    </DxFormLayoutItem>

                    <DxFormLayoutItem Caption="Production Date:"
                                      ColSpanMd="6">
                        <DxDateEdit @bind-Date="@starship.ProductionDate" ShowValidationIcon="true"/>
                    </DxFormLayoutItem>

                    <DxFormLayoutItem Caption="Description:"
                                      ColSpanMd="12">
                        <DxMemo @bind-Text="@starship.Description" ShowValidationIcon="true"/>
                    </DxFormLayoutItem>

                    <DxFormLayoutItem ColSpanMd="12">
                        <DxButton SubmitFormOnClick="true"
                                  Text="Submit"
                                  RenderStyle="ButtonRenderStyle.Secondary"/>
                    </DxFormLayoutItem>

                    <DxFormLayoutItem ColSpanMd="12">
                        <ValidationSummary/>
                    </DxFormLayoutItem>

                </DxFormLayout>

                <div class="row w-100 mx-0">
                    <p class="demo-text col-12 mt-2">
                        Form Validation State:
                        <b>@FormValidationState</b>
                    </p>
                </div>
            </EditForm>
        </div>
    </ChildContentWithParameters>

    @code {
        string FormValidationState = @"Press the ""Submit"" button to validate the form.";

        Starship starship = new() {
            ProductionDate = DateTime.Now + TimeSpan.FromDays(1),
            Engine = Engine.Warp
        };

        List<Classification> classifications = new() {
            new(1, "Defense"),
            new(2, "Exploration"),
            new(3, "Diplomacy")
        };

        void HandleValidSubmit() {
            FormValidationState = @"Form data is valid";
        }

        void HandleInvalidSubmit() {
            FormValidationState = @"Form data is invalid";
        }

    }

</DemoPageSectionComponent>
